<template>
  <div>
    <h1>{{title}}</h1>
       <div v-for="(item,index) in arr" :key="index">
      <div class="caidancontent">
        <!-- <img src="item.src" alt=""> -->
        <div class="liuxingimg"></div>
        <div class="liuxingxingxi">
          <span class="leibie">{{ item.leibie }}</span><br>
          <span class="caipu">{{ item.caipu }}</span><br>
          <span class="creater">{{ item.name }}创建</span>
          <span class="shoucang">{{ item.shoucang }}收藏</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title:'最流行',
      arr: [
        {
          name: "lll",
          id: 1,
          age: 22,
          src: "222",
          leibie: "饼干类",
          caipu: "22",
          shoucang: "99",
        },
        {
          name: "lll1",
          id: 2,
          age: 22,
          src: "222",
          leibie: "蛋黄酱",
          caipu: "22",
          shoucang: "99",
        },
      ],
    };
  },
};
</script>

<style  scoped>
.caidancontent {
  margin: 40px auto;
  height: 140px;
  width: 500px;
  border: 1px solid rgb(216, 216, 216);
  display: flex;
}
.liuxingimg {
  display: inline-block;
  height: 140px;
  width: 215px;
  background-color: blanchedalmond;
}
.liuxingxingxi{
    margin: 20px;
}
.liuxingxingxi span{
    margin: 20px;
}
.leibie {
  font-size: 20px;
  font-weight: 500;
    margin-top: 15px;

}
.caipu {
  color: chartreuse;
}

.shoucang:hover{
  color: rgb(151, 8, 8);
}
.leibie:hover{
  color: rgb(151, 8, 8);
}
.liuxingimg:hover{
  opacity: 0.8;
}
</style>